var canvas;
var context;
var canvas,ctx,mouseX=9999,mouseY=9999,distX,distY,circle, objectReference;
var imageObj;
var firstDrop = true;

function handleDragStart(e) {
  this.style.opacity = '0.4';  // this / e.target is the source node.
}

var cols = document.querySelectorAll('#col1 .column');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
});

var view = document.querySelectorAll('#col2');
[].forEach.call(view, function(v) {
	  v.addEventListener('dragstart', handleDragStart, false);
	  v.addEventListener('dragenter', handleDragEnter, false)
	  v.addEventListener('dragover', handleDragOver, false);
	  v.addEventListener('dragleave', handleDragLeave, false);
	  v.addEventListener('drop', handleDrop, false);
	  v.addEventListener('dragend', handleDragEnd, false);
});


function handleDragStart(e) {
  this.style.opacity = '0.4';  // this / e.target is the source node.
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
  this.classList.add('over');
}

function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}

var cols = document.querySelectorAll('#col1 .column');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false);
  col.addEventListener('dragover', handleDragOver, false);
 // col.addEventListener('dragleave', handleDragLeave, false);
});

///Competing the drag

function handleDrop(e) {

//  // this/e.target is current target element.
//
//  if (e.stopPropagation) {
//    e.stopPropagation(); // Stops some browsers from redirecting.
//  }
//
//  // Don't do anything if dropping the same column we're dragging.
//  if (dragSrcEl != this) {
//    // Set the source column's HTML to the HTML of the columnwe dropped on.
//    //dragSrcEl.innerHTML = this.innerHTML;
//    this.innerHTML += e.dataTransfer.getData('text/html'); 
//  }
//  

setImageObject(e.dataTransfer.getData('text/html'));  

  return false;
}

function handleDragEnd(e) {
  // this/e.target is the source node.
  this.style.opacity = '1';
  
  [].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });
}

var cols = document.querySelectorAll('#col1 .column');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false)
  col.addEventListener('dragover', handleDragOver, false);
  //col.addEventListener('dragleave', handleDragLeave, false);
  //col.addEventListener('drop', handleDrop, false);
  col.addEventListener('dragend', handleDragEnd, false);
});



var dragSrcEl = null;

function handleDragStart(e) {
  // Target (this) element is the source node.
  this.style.opacity = '0.4';

  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

//function draw (src) {
//	
//	var imageObj = new Image();
//	imageObj.src = src.substring(src.indexOf("src=")+5, src.length-6);
//	
//    canvas = document.getElementById('rectangle');
//    if (canvas.getContext) {
//      context = canvas.getContext('2d');
//      
//      //context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
//      
//    } else {
//      // put code for browsers that don’t support canvas here
//      alert("This page uses HTML 5 to render correctly. Other browsers may not see anything.");
//    }
//    
//    
//  }

function setImageObject(src){
	imageObj = new Image();
	imageObj.src = src.substring(src.indexOf("src=")+5, src.length-7);
}


function drawCanvas(){
	
	if(imageObj != null){
		
		circle.r = imageObj.width/2;

		ctx.clearRect(0, 0, canvas.width, canvas.height);
				
		    ctx.beginPath();
		   // ctx.drawImage(imageObj, circle.x,circle.y, imageObj.width, imageObj.height);
		    
		    
		    ctx.arc(circle.x+imageObj.width/2,circle.y+imageObj.height/2,circle.r,0,Math.PI*2,false);		
		    
		    drawBackground();
		    

		    ctx.drawImage(imageObj, circle.x, circle.y, imageObj.width, imageObj.height);
		    
		    
		    //var pattern = ctx.createPattern(imageObj, 'no-repeat');	 

		  //  ctx.save();
		    //ctx.fillStyle = pattern;
		    
		    //ctx.fillRect(circle.x,circle.y, imageObj.width, imageObj.height);
		   // ctx.restore();
		    
		    ctx.isPointInPath(mouseX,mouseY) ? circle.mouse = true : circle.mouse = false;
		   // ctx.fill();
		    
	}else{
//    ctx.clearRect(0,0,canvas.width,canvas.height);
//    ctx.beginPath();
//    ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2,false);
// 
//    
//    ctx.isPointInPath(mouseX,mouseY) ? circle.mouse = true : circle.mouse = false;
//    ctx.fill();
	}
}


function findOffset(obj) {
    var curX = curY = 0;
    if (obj.offsetParent) {
        do {
            curX += obj.offsetLeft;
            curY += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return {x:curX,y:curY};
    }
}
    
function updateCanvas(e){
    
    var pos = findOffset(canvas);
    
    mouseX = e.pageX - pos.x;
    mouseY = e.pageY - pos.y;
    
   
    
    if(circle.drag){
        circle.x = mouseX - distX;
        circle.y = mouseY - distY;
    }
    
    drawCanvas();
}

function startDrag(){
	//alert("start drag");
	
    if(circle.mouse == true){
        circle.drag = true;
        distX = mouseX - circle.x;
        distY = mouseY - circle.y;
        
        ctx.save();
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.shadowColor="rgba(0,0,0,.3)";
        ctx.shadowBlur = 5;
        
        drawCanvas();
    }else{
    	distX = mouseX - circle.x;
        distY = mouseY - circle.y;
        
        ctx.save();
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        ctx.shadowColor="rgba(0,0,0,.3)";
        ctx.shadowBlur = 5;
        
        drawCanvas();
    }
}

function stopDrag(){
	//alert("stop drag");

    if(circle.drag == true){
        circle.drag = false;
        ctx.restore();
        drawCanvas();
    }
}    

function clearCanvas(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function drawBackground(){
    var canvasBg = new Image();
    canvasBg.src = "road1.png";
    
    var bg_pattern = ctx.createPattern(canvasBg, 'no-repeat');	 
    ctx.fillStyle = bg_pattern;
    ctx.fillRect(0, 0, canvasBg.width, canvasBg.height);
}

function save(){

	var assName = document.forms(0).elements(0).value;	

	localStorage.setItem("name"+localStorage.length, assName);
	
	localStorage.setItem(assName+"-img"+localStorage.length, imageObj.src);
	
	localStorage.setItem(assName+"-XY"+localStorage.length, circle.x+","+circle.y);
}

window.onload = function(images){
	canvas = document.getElementById("c");
    ctx = canvas.getContext('2d');

    circle = {
        x: canvas.width/2,
        y: canvas.height/2,
        r: 50,
        mouse: false,
        drag: false
    }
    
    canvas.addEventListener('mousemove',updateCanvas,false);
    canvas.addEventListener('mousedown',startDrag,false);
    canvas.addEventListener('mouseup',stopDrag,false);
    
    canvas.addEventListener('selectstart',function(e){e.preventDefault();},false);	
    //canvas.style.MozUserSelect = "none";    
    
    drawBackground();
        
    drawCanvas();	
}; 